<!--字典管理页-->
<template>
    <div style="background-color:#fff;padding:10px 20px;">
        <span style="line-height:60px;font-size:20px;">字典管理</span>
    </div>
    <!-- 字典数据搜索卡片 -->
    <el-card style="margin:20px;height: 70px;">
        <el-form :inline="true">
            <el-form-item label="维修车辆">
                <el-input placeholder="请输入车牌号" style="width:220px;" v-model="searchForm.license"
                          @keydown.enter="selectRepairList()"></el-input>
            </el-form-item>
            <el-form-item label="送修人员">
                <el-input placeholder="请输入送修人姓名" style="width:220px;" v-model="searchForm.username"
                          @keydown.enter="selectRepairList()"></el-input>
            </el-form-item>
            <el-form-item label="维修状态">
                <el-select placeholder="请选择" style="width:220px;" v-model="searchForm.repairStatus" @change="selectRepairList()">
                    <el-option v-for="item in vehicleRepairStatus" :value="item.value" :label="item.label"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetSearch()" :icon="Refresh">重置</el-button>
                <el-button type="primary" @click="selectRepairList()" :icon="Search">搜索</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="margin:20px;">
        <div style="margin:10px 0px 40px 10px;">
            字典列表
            <el-button type="primary" style="float: right;margin-top:-3px;" @click="addRepairRecord">录入维修车辆</el-button>
        </div>
        <el-table :data="repairArr">
            <el-table-column type="index" label="编号" width="80" align="center"/>
            <el-table-column prop="license" label="维修车辆" align="center"/>
            <el-table-column prop="item" label="维修项目" align="center" :formatter="repairItemFormatter"/>
            <el-table-column prop="username" label="送修人员" align="center"/>
            <el-table-column prop="addr" label="维修地点" align="center" :formatter="repairAddrFormatter"/>
            <el-table-column prop="repairTime" label="维修时间" align="center"/>
            <el-table-column prop="fee" label="维修费用" align="center"/>
            <el-table-column prop="material" label="维修材料" align="center" :formatter="repairMaterialFormatter" width="200"/>
            <el-table-column prop="repairStatus" label="维修状态" align="center" :formatter="repairStatusFormatter"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button circle type="primary" size="small" @click="editVehicleRepairInfo(scope.row.repairId)" :icon="Edit"></el-button>
                    <el-button circle type="danger" size="small" @click="deleteRepairRecord(scope.row.repairId)" :icon="Delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin:30px;float: right;">
            <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
             :pager-count="4" 表示显示4个页码
             :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
             current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
             :total="400" 表示总条数，需要双向绑定
             @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
             @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 15, 20]"
                v-model:current-page="currentPage"
                v-model:page-size="currentSize"
                v-model:total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </el-card>

    <!-- 保存车辆维修单弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;"
               :before-close="handleClose">
        <el-form label-width="80px" label-position="top">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="送修人">
                        <el-input placeholder="请输入" v-model="saveRepairForm.username" :disabled="user!=null"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维修车辆">
                        <el-select v-model="saveRepairForm.license" placeholder="请选择车牌号" style="width:100%" :disabled="saveRepairForm.license!=null">
                            <el-option v-for="item in vehicleLicenseArr" :value="item.license" :label="item.license"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="维修项目">
                        <el-select v-model="saveRepairForm.item" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in vehicleRepairItem" :value="item.value" :label="item.label"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维修门店">
                        <el-select v-model="saveRepairForm.addr" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in vehicleRepairAddr" :value="item.value" :label="item.label"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="维修材料">
                        <el-select v-model="saveRepairForm.material" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in vehicleRepairMaterial" :value="item.value" :label="item.label"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维修费用">
                        <el-input placeholder="请输入" v-model="saveRepairForm.fee" style="width:100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="维修时间">
                        <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                        v-model="saveRepairForm.repairTime"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维修状态">
                        <el-radio-group v-model="saveRepairForm.repairStatus">
                            <el-radio-button label="维修中" value="1" />
                            <el-radio-button label="已完成" value="0" />
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleClose()">取消</el-button>
            <el-button type="primary" @click="saveRepairInfo()">保存</el-button>
        </template>
    </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import { Edit,View,Van,Delete,Plus,ArrowLeftBold,Refresh,Search } from '@element-plus/icons-vue';

const dialogVisible = ref(false);
const dialogTitle = ref('录入维修车辆');
const user = getUser();

//车辆维修列表数据
const repairArr = ref([]);
//todo 车牌号选项，用于选择维修车辆，数据源：已注册车辆
const vehicleLicenseArr = ref([]);
//车辆维修状态选项
const vehicleRepairStatus = ref();
//车辆维修项目选项
const vehicleRepairItem = ref();
//车辆维修地址选项
const vehicleRepairAddr = ref();
//车辆维修材料选项
const vehicleRepairMaterial = ref();
//车辆维修项目格式
const repairMaterialFormatter = (row, column, cellValue, index) => {
    if (!vehicleRepairMaterial.value){
        return cellValue;
    }
    for (let item of vehicleRepairMaterial.value) {
        if (item.value == cellValue) {
            cellValue = item.label;
        }
    }
    return cellValue;
}
//车辆维修项目格式
const repairAddrFormatter = (row, column, cellValue, index) => {
    if (!vehicleRepairAddr.value){
        return cellValue;
    }
    for (let item of vehicleRepairAddr.value) {
        if (item.value == cellValue) {
            cellValue = item.label;
        }
    }
    return cellValue;
}
//车辆维修项目格式
const repairItemFormatter = (row, column, cellValue, index) => {
    if (!vehicleRepairItem.value){
        return cellValue;
    }
    for (let item of vehicleRepairItem.value) {
        if (item.value == cellValue) {
            cellValue = item.label;
        }
    }
    return cellValue;
}
//车辆维修状态格式
const repairStatusFormatter = (row, column, cellValue, index) => {
    if (!vehicleRepairStatus.value){
        return cellValue;
    }
    for (let item of vehicleRepairStatus.value) {
        if (item.value == cellValue) {
            cellValue = item.label;
        }
    }
    return cellValue;
}
onMounted(() => {
    selectRepairList();
    loadDictOptions(vehicleRepairStatus,"repair_status");
    console.log(vehicleRepairStatus.value);
    loadDictOptions(vehicleRepairItem,"repair_item");
    loadDictOptions(vehicleRepairAddr,"repair_address");
    loadDictOptions(vehicleRepairMaterial,"repair_material");
})
//查询所有字典信息
const searchForm = ref({
    license: '',
    username: '',
    repairStatus:''
});
//获取所有已注册车辆信息-录入维修信息弹窗车牌号下拉框选项
const selectAllVehicleLicense = () => {
    axios.get(BASE_URL+'/v1/vehicle/getAllVehicleLicense')
        .then((res)=>{
            if (res.data.code == 2002){
                console.log('查看selectAllVehicleLicense返回的数据：');
                console.log(res.data);
                vehicleLicenseArr.value = res.data.data;
                console.log(vehicleLicenseArr.value)
            } else {
                ElMessage.error(res.data.msg)
            }
        })
};
//获取维修车辆列表信息
const selectRepairList = () => {
    //第一步:查询数据之前需要把当前页码以及每页显示多少条传给服务器
    searchForm.value.pageSize = currentSize.value;
    searchForm.value.pageNum = currentPage.value;
    //第二步:发送请求,获取服务器返回的数据
    let data = qs.stringify(searchForm.value);
    console.log(data);
    axios.get(BASE_URL+'/v1/vehicle/select/repairList?' + data)
        .then((response) => {
            if (response.data.code == 2002) {
                console.log('查看PageData返回的数据：');
                console.log(response.data);
                //返回的response.data.data中还有一层list中才存的是需要的数据
                repairArr.value = response.data.data.list;
                total.value = response.data.data.total;
            } else {
                ElMessage(response.data.msg);
            }
        })
}
//重置用户搜索信息
const resetSearch = () => {
    searchForm.value = {};
    selectRepairList();
}

//定义变量保存维修单信息
const saveRepairForm = ref({});
//保存维修单信息-弹窗保存按钮
const saveRepairInfo = () => {
    dialogVisible.value = true;
    saveRepairForm.value.userId = user.id;
    saveRepairForm.value.username = user.username;
    let data = qs.stringify(saveRepairForm.value);
    console.log("维修单信息：")
    console.log(data);
    axios.post(BASE_URL+'/v1/vehicle/save/repair', data).then((response) => {
        if (response.data.code == 2002) {
            ElMessage.success('保存成功👌👌');
            dialogVisible.value = false;
            saveRepairForm.value = {};
            selectRepairList();
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}
//录入新的车辆维修订单
const addRepairRecord = ()=>{
    dialogVisible.value=true;
    dialogTitle.value = '新增字典';
    saveRepairForm.value.username = user.username;
    selectAllVehicleLicense();
}

//编辑字典信息
const editVehicleRepairInfo = (id) => {
    dialogTitle.value = '编辑字典';
    dialogVisible.value = true;
    saveRepairForm.value.repairId = id;
    console.log("维修单id：")
    console.log(id);
    axios.get(BASE_URL+'/v1/vehicle/select/repair/' + id).then((response) => {
        if (response.data.code == 2002) {
            //注意！！！返回值是个list,记得加[0]
            //分页查询后多了一层list才能访问到数据
            console.log('查看返回的维修单信息：');
            console.log(response.data.data);
            saveRepairForm.value = response.data.data;
        } else {
            ElMessage.error(response.data.msg);
        }
    })
}

//实现取消按钮的功能
const handleClose = () => {
    if (confirm('是否关闭本窗口?')) {
        //用户确认关闭后,将弹窗关闭
        dialogVisible.value = false;
        //取消时把填的数据都清空，表单回复到初始状态
        saveRepairForm.value={};
        //将表单标签重置为'录入维修车辆'
        dialogTitle.value='录入维修车辆';
    }
}

//删除维修单记录
const deleteRepairRecord = (id) => {
    if (confirm('您确认要删除此维修单记录吗?')) {
        axios.delete(BASE_URL+'/v1/vehicle/delete/repair/' + id).then((response) => {
            if (response.data.code === 2002) {
                ElMessage.success('删除成功!');
                selectRepairList();
            } else {
                ElMessage.error(response.data.msg);
            }
        })
    }
}


//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
    console.log('每页展示' + val + '条数据');
    selectRepairList();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
    console.log('当前的页数为：' + val);
    selectRepairList();
}
</script>

<style scoped>

</style>